<ng-container
  *appObserve="
    vulnerabilitiesData$ as vulnerabilitiesData;
    error: errorTemplate;
    loading: loadingTemplate
  ">
  <app-risks-view-report
    #vulnerabilityViewReport
    *ngIf="vulnerabilitiesList && isPrinting"
    class="printable-area"
    [reportPage]="'vulnerabilities'"
    [data]="vulnerabilitiesList"
    [isMeetingReportLimit]="isMeetingReportLimit"
    [charts]="statisticCharts">
  </app-risks-view-report>
  <app-assets-view-report
    #assetsViewReport
    *ngIf="vulnerabilitiesList && isPrintingAssets"
    class="printable-area"
    [reportPage]="'vulnerabilities'"
    [masterGrids]="masterGrids"
    [isMeetingReportLimit]="isMeetingReportLimit"
    [dictionaryData]="vulnerabilitiesList">
  </app-assets-view-report>
  <div class="screen-area" style="height: calc(100vh - 180px)">
    <div
      class="d-flex justify-content-end align-items-center"
    >
      <div
        class="d-flex justify-content-center align-items-center"
        *ngIf="!vulnerabilitiesFilterService.filtered && vulnerabilitiesData.vulnerabilities.vulnerabilities.length > 0 || vulnerabilitiesFilterService.filtered && vulnerabilitiesFilterService.filteredCount > 0"
      >
        <app-loading-button
          (btnClick)="printAssetsPDF()"
          [text]="'scan.report.PDF_LINK2' | translate"
          appearance="mat-button"
          buttonClasses="mr-1 d-flex justify-content-center align-items-center"
          iconClasses="eos-icons"
          iconName="print">
        </app-loading-button>
        <app-loading-button
          (btnClick)="printVulnerabilityPDF()"
          [text]="'scan.report.PDF_LINK' | translate"
          appearance="mat-button"
          buttonClasses="mr-1 d-flex justify-content-center align-items-center"
          iconClasses="eos-icons"
          iconName="print">
        </app-loading-button>
        <button
          (click)="downloadCsv()"
          class="mr-1 d-flex justify-content-center align-items-center"
          mat-button>
          <i class="eos-icons icon-18">csv_file</i>
        </button>
      </div>
      <app-loading-button
        (btnClick)="refresh()"
        [appearance]="'mat-button'"
        [buttonClasses]="'d-flex justify-content-center align-items-center'"
        [disabled]="false"
        [iconClasses]="'eos-icons icon-18'"
        [iconName]="'refresh'"
        [id]="'vulnerabilities-refresh-button'"
        [loading]="false"
        [text]="'network.REFRESH' | translate"
        [type]="'button'">
      </app-loading-button>
    </div>
    <div style="height: 200px">
      <app-vulnerability-charts></app-vulnerability-charts>
    </div>
    <div style="height: calc(100% - 160px)">
      <app-vulnerability-items
        [domains]="vulnerabilitiesData.domain"
        [vulnerabilities]="
          vulnerabilitiesData.vulnerabilities.vulnerabilities
        "></app-vulnerability-items>
    </div>
  </div>
</ng-container>
<ng-template #errorTemplate let-error>
  {{ error | json }}
</ng-template>
<ng-template #loadingTemplate>
  <app-loading-template></app-loading-template>
</ng-template>
